<template>
    <div class="bottom-view">
        <div class="view">
            <el-card shadow="hover">
                <template v-slot:header>
                    <div class="title-wrapper">关键词搜索</div>
                </template>
                <template>
                    <div class="chart-wrapper">
                        <div class="chart-inner">
                            <div class="chart">
                                <div class="chart-title">搜索用户数</div>
                                <div class="chart-data">{{ userCount }}</div>
                                <v-chart :options="searchUserOptions"></v-chart>
                            </div>
                            <div class="chart">
                                <div class="chart-title">搜索量</div>
                                <div class="chart-data">{{ searchCount }}</div>
                                <v-chart :options="searchNumberOptions"></v-chart>
                            </div>
                        </div>
                        <div class="table-wrapper">
                            <el-table :data="tableData">
                                <el-table-column prop="rank" label="排名"/>
                                <el-table-column prop="keyword" label="关键词" />
                                <el-table-column prop="count" label="总搜索量"/>
                                <el-table-column prop="users" label="搜索用户数"/>
                                <el-table-column prop="range" label="搜索占比"/>
                            </el-table>
                            <el-pagination
                                layout="prev,pager,next"
                                :total="total"
                                :page-size="pageSize"
                                background
                                @current-change="onPageChange"
                            />
                        </div>
                    </div>
                </template>
            </el-card>
        </div>
        <div class="view">
            <el-card shadow="hover">
                <template v-slot:header>
                    <div class="title-wrapper">
                        <div class="title">分类销售排行</div>
                        <div class="radio-wrapper">
                            <el-radio-group v-model="radioSelect" size="small" @change="onCategoryChange">
                                <el-radio-button label="品类"></el-radio-button>
                                <el-radio-button label="商品"></el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                </template>
                <template>
                    <div class="chart-wrapper">
                        <v-chart :options="categoryOptions"></v-chart>
                    </div>
                </template>
            </el-card>
        </div>
    </div>
</template>

<script>
import commonDataMixin from '@/mixins/commonDataMixin'
const colors = ['#8d7fec', '#5085f2', '#f8726b', '#e7e702', '#78f283', '#4bc1fc']

export default {
    mixins: [commonDataMixin],
    data() {
        return {
            searchUserOptions: {},
            searchNumberOptions: {},
            radioSelect: '品类',
            categoryOptions: {},
            tableData: [],
            total: 0,
            userCount: 0,
            searchCount: 0,
            pageSize: 4,
            totalData: []
        };
    },

    mounted() {
        this.renderPieChart()
       
    },

    methods: {
        onCategoryChange(type) { 
            this.radioSelect = type
            this.renderPieChart()
        },
        renderLineChart() { //绘制折线图
            //两个图表有共性。可以先建一个基础的 
            const createOption = (key) => { 
                const data = []
                const axis = []
                this.wordCloud.data.forEach(item => data.push(item[key]))
                this.wordCloud.data.forEach(item => axis.push(item.word))
                // console.log(data)
                return {
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        show: false
                    },
                    // tooltip: {},
                    series: [{ 
                        type: 'line',
                        data: data,
                        areaStyle: { //面积样式
                            color: 'rgba(95,187,255,.5)'
                        },
                        lineStyle: { //线条样式
                            color: 'rgb(95,187,255)'
                        },
                        itemStyle: { //线条上点样式
                            opacity: 0
                        },
                        smooth: true //更加光滑
                    }],
                    grid: { 
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                
                }
            }
            this.searchUserOptions = createOption('user')
            this.searchNumberOptions = createOption('count')
        },
        onPageChange(page) { //页数改变
            this.renderTable(page)
        },
        renderPieChart() { //
            if (!this.category1.data1 || !this.category2.data2) { //确保有数据才渲染图表
                return
            }
            let data
            let axis
            let total = 0
            if (this.radioSelect === '品类') {
                data = this.category1.data1.slice(0, 6)
                axis = this.category1.axisX.slice(0, 6)
                total = data.reduce((s, i) => s + i, 0) //用来计算总数量的方法
            } else {
                data = this.category2.data2.slice(0, 6)
                axis = this.category2.axisX.slice(0, 6)
                total = data.reduce((s, i) => s + i, 0)
            }
            const chartData = []
            data.forEach((item, index) => {
                const percent = `${(item / total * 100).toFixed(2)}%`
                chartData.push({
                    legendname: axis[index],
                    value: item,
                    percent,
                    itemStyle: {
                        color: colors[index]
                    },
                    name: `${axis[index]} | ${percent}`
                })
            })
            this.categoryOptions = {
                title: [{  //正标题1
                    text: `${this.radioSelect}分布`,
                    textStyle: { 
                        fontSize: 14,
                        color: '#666'
                    },
                    left: 20,
                    top: 20
                },{  //正标题2
                    text: '累计订单量',//正文
                    subtext: total, //副文
                    x: '34.5%',
                    y: '42.5%',
                    textStyle: { 
                        fontSize: 14,
                        color: '#999'
                    },
                    subtextStyle: { 
                        fontSize: 28,
                        color: '#333'
                    },
                    textAlign: 'center',
                }],
                series: [{ //系列
                    name: '品类分布',
                    type: 'pie',
                    data: chartData,
                    label: { 
                        normal: { 
                            show: true,
                            position: 'outter', //将数据显示在图表外
                            formatter: function(params) { //获取店铺名称
                                return `${params.data.legendname}`
                            }
                        }
                    },
                    center: ['35%','50%'], //决定圆心位置，参考系为原位置
                    radius: ['45%','60%'], //内半径和外半径
                    labelLine: { //内外圈线段长度控制
                        normal: { 
                            length: 5,
                            length2: 3,
                            smooth: true
                        }
                    },
                    clockwise: false, //true为顺时针排列，false为逆时针排列
                    itemStyle: { //设置item间间隔
                        borderWidth: 4,
                        borderColor: '#fff'
                    }
                }],
                legend: {
                    type: 'scroll', //可以滑动
                    orient: 'vertical', //垂直排列
                    height: 250,
                    left: '70%',
                    top: 'middle',
                    textStyle: { 
                        color: '#8c8c8c'
                    }
                }, //设置图表控件,要求数据源中必须有name
                tooltip: { //提示信息
                    trigger: 'item', //鼠标移动到item上会触发
                    formatter: function(params) { //显示信息
                        const str = params.seriesName + '<br />' + params.marker 
                                    + params.data.legendname + '<br />' 
                                    + '数量: ' + params.data.value + '<br />'
                                    + '占比: ' + params.data.percent + '%'
                        return str 
                    }
                }
            }
        },
        renderTable(page) { //分页算法
            this.tableData = this.totalData.slice((
                page - 1) * this.pageSize,
                (page - 1) * this.pageSize + this.pageSize
            )
        }
    },
    watch: { //观测wordCloud是否有发生变化，实时更新
        wordCloud() { 
            const totalData = []
            for(var i = 0; i < this.wordCloud.data.length; i++) { 
                totalData.push({ 
                    id: i + 1,
                    rank: i + 1,
                    keyword: this.wordCloud.data[i].word,
                    count: this.wordCloud.data[i].count,
                    users: this.wordCloud.data[i].user,
                    range: `${((this.wordCloud.data[i].user / this.wordCloud.data[i].count) * 100).toFixed(2)}%`
                })
            }
            // console.log(this.wordCloud)
            this.totalData = totalData
            this.total = this.wordCloud.data.length
            this.renderTable(1) //渲染第一个数据
            this.userCount = this.format(this.wordCloud.userCount)
            this.searchCount = this.format(this.wordCloud.searchCount)
            this.renderLineChart() //一定要在这里调用，确保一定要获取到最新的wordCloud
        },
        category1() { 
            this.renderPieChart()//一定要在这里调用，确保一定要获取到最新的category1
        }
    }
};
</script>

<style lang="scss" scoped>
    .bottom-view { 
        display: flex;
        margin-top: 20px;
        .view { 
            flex: 1; 
            width: 50%;
            box-sizing: border-box;
            &:first-child { 
                padding: 0 10px 0 0;
            }
            &:last-child { 
                padding: 0 0 0 10px;
            }
            .title-wrapper { 
                display: flex;
                align-items: center;
                height: 60px;
                box-sizing: border-box;
                border-bottom: 1px solid #eee;
                font-size: 14px;
                font-weight: 800;
                padding: 0 0 0 20px;
                .radio-wrapper { 
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    padding-right: 20px;
                }
            }
            .chart-wrapper { 
                display: flex;
                flex-direction: column;
                height: 452px; 
                .chart-inner {
                    display: flex;
                    padding: 0 10px;
                    margin-top: 20px;
                    .chart { 
                        flex: 1;
                        padding: 0 10px;
                        .chart-title {
                            color: #999;
                            font-size: 14px;
                        }
                        .chart-data {
                            font-size: 22px;
                            color: #333;
                            font-weight: 500;
                            letter-spacing: 2px;
                        }
                        .echarts { 
                            height: 50px;
                        }
                    }
                }
                .table-wrapper { 
                    flex: 1;
                    margin-top: 20px;
                    padding: 0 20px 20px;
                    .el-pagination { 
                        display: flex;
                        justify-content: flex-end;
                        margin-top: 15px;
                    }
                }
            }
           
        }
    }
</style>